<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

 <button @click="forceUpdata">强制更新</button>
 <button @click="update1">修改数组的某一个值</button>
 <button @click="update2">使用变更方法修改数组</button>
 <button @click="update3">使用非变更方法修改数组</button>
 <ul>
    <li v-for="item in names">{{item}}</li>
 </ul>
 </div>
 <script>
    Vue.config.productionTip=false;

    const vm =new Vue({
        el: "#app",
        data() {
            return {
                name:["wucy","zhangsan","lily"]
            }
        },
        methods:{
            forceUpdate() {
                this.$forceUpdate()
            },
            update() {
                /* js的限制,无法检测数组中某个值的变化,所以直接修改数组视图不会更新    */
                //this.name[1] ="libo";
                //this.names.length=0;

            },
            update3() {
                this.names=this.names.filter(item =>{
                    return item !=="lily"
                })
            }
        }
    })
 </script>
</body>

</html>